<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./案例1-评论列表/lib/bootstrap-v4.6.0.css">
  <link rel="stylesheet" href="./案例1-评论列表/lib/cmtlist.css">
</head>

<body>

  <!-- 栅格系统 -->
  <div class="container-fluid">
    <!-- 栅格系统中的一行 -->
    <div class="row">
      <!-- 左侧的表格，占了 8 列 -->
      <div class="col-sm-8">
        <!-- 评论列表 -->
        <ul class="list-unstyled">
         
        </ul>
      </div>

      <!-- 右侧的添加区域，占了 4 列 -->
      <div class="col-sm-4">
        <!-- 发表评论的卡片 -->
        <form class="card text-white bg-secondary sticky-top shadow-sm">
          <div class="card-header">发表评论</div>
          <div class="card-body bg-light">
            <!-- 评论人 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">评论人</span>
              </div>
              <input type="text" class="form-control" placeholder="请输入评论人名称" name="username">
            </div>
            <!-- 评论内容 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">评论内容</span>
              </div>
              <textarea type="text" class="form-control" placeholder="请输入评论内容（最多120字）" maxlength="120"
                name="content"></textarea>
            </div>
            <!-- 发表评论按钮 -->
            <button class="btn btn-dark" id="btnAdd">发表评论</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="./案例1-评论列表/lib/jquery-v3.6.0.js"></script>
  <script>
    $(function () {
        
        function getCmlist(){
            $.get('http://www.liulongbin.top:3006/api/cmtlist',function(res){
                console.log(res);
                if (res.status === 200) {
                    renderCmlist(res.data)
                }
            })
        }
        getCmlist()
        function renderCmlist (list) {
            const rows = []
            list.forEach((item) => {
                rows.push(`<li class="media shadow-sm">
            <img src="https://img01.yzcdn.cn/vant/sand.jpg" class="mr-3" alt="...">
            <div class="media-body">
              <p>${item.content}</p>
              <p class="mt-0 mb-1 cmt-info">
                <span>评论时间：${item.time}</span>
                <span class="username">评论人：${item.username}</span>
              </p>
            </div>
            <button type="button" class="close" aria-label="关闭" data-id="${item.id}">
              <span aria-hidden="true">&times;</span>
            </button>
          </li>`)
               
            })
            $('.list-unstyled').html(rows)

        }

        //阻止表单默认跳转
        $('form').on('submit',function(e){
        e.preventDefault()
        const str = $(this).serialize()
        $.post('http://www.liulongbin.top:3006/api/addcmt',str,function(res){
            console.log(res);
            $('form')[0].reset()
            getCmlist()
        })
            
        })


        //删除评论
        $('.list-unstyled').on('click','.close',function(res){
            const id = $(this).attr('data-id')
            $.ajax({
                type:'DELETE',
                url:`http://www.liulongbin.top:3006/api/delcmt?id=${id}`,
                success:function(res) {
                    if (res.status === 200) {
                        getCmlist()
                    }
                }
            })
        })
        
    })
  </script>
</body>

</html>